<template>
  <nav
    class="fdx-nav-tab"
    :class="[
      'fdx-nav-tab--' + mode,
      'fdx-nav-tab--' + type,
      shadow ? 'fdx-nav-tab--shadow' : '',
      border ? 'fdx-nav-tab--border' : ''
    ]"
    ref="navTab"
  >
    <slot></slot>
    <div
      v-if="!$slots.default"
      v-for="(item, index) in tabs"
      :key="index"
      :class="[
        'fdx-nav-tab-item-' + index,
        index === currentValue ? 'active' : '',
        index === tabs.length - 1?'last-item':''
      ]"
      class="tab-item fdx-nav-tab-item"
      @click="selectItem(index, item)"
    >
      <span class="item-text">{{ getTabText(item) }}</span>
    </div>
    <div v-if="mode === 'scroll'" class="scroll-line" ref="scrollLine" :style="scrollLineStyles"></div>
  </nav>
</template>

<script>
/**
 * nav-tab
 * @param {string} [type=default/primary/gradient] - 样式
 * @param {string} [mode=scroll/line/longline] -模式
 *
 * @example 第一种方式
 * @desc 传入tabs数组
 * <nav-tab :tabs="tabs" v-model="selected" type="gradient" @click.native="switchType"></nav-tab>
 *
 * @example 第二种方式
 * @desc 内容依赖 nav-tab-item
 *<nav-tab v-model="selected" type="primary" @click="$refs.navtab.scrollLine()" ref="navtab">
 *     <nav-tab-item id="0">
 *      <badge value="16" class="item">个人房源</badge>
 *    </nav-tab-item>
 *   <nav-tab-item id="1">机构房源</nav-tab-item>
 * </nav-tab>
 */
export default {
  props: {
    tabs: {
      type: Array,
      default: function() {
        return []
      }
    },
    value: {
      type: [String, Number],
      default: '0'
    },
    mode: {
      type: String,
      default: 'scroll' // 3中模式 line/longline/scroll
    },
    type: {
      type: String,
      default: 'default'
    },
    shadow: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentValue: this.value,
      scrollLineStyles: {
        width: '',
        transform: 'translate3d(0,0,0)'
      }
    }
  },
  mounted() {
    this.currentValue = this.value
    if (this.mode === 'scroll') {
      setTimeout(() => {
        this.setWidthAndPos()
      }, 500)
    }
  },
  methods: {
    getTabText(item) {
      if (_.isString(item)) {
        return item
      }
      if (_.isObject(item)) {
        return item.text
      }
    },
    selectItem(index, item) {
      this.currentValue = index
      if (this.mode === 'scroll') {
        this.setWidthAndPos()
      }
      this.$emit('input', index, item)
      this.$emit('select', index, item)
    },
    scrollLine(ani) {
      this.setWidthAndPos(ani)
    },
    setWidthAndPos(ani) {
      if (parseInt(this.value) >= 0) {
        if (!this.$refs.navTab) return
        setTimeout(() => {
          const value = !this.$slots.default ? this.currentValue : this.value
          const el = this.$refs.navTab.querySelector('.fdx-nav-tab-item-' + value).querySelector('.item-text')
          this.scrollLineStyles.width = el.clientWidth + 10 + 'px'
          this.scrollLineStyles.transform = `translate3d(${el.offsetLeft - 5}px,-5px,0)`
          if (ani === false) {
            this.scrollLineStyles.transition = 'none'
          } else {
            this.scrollLineStyles.transition = 'all ease 200ms'
          }
        }, 100)
      }
    }
  },
  watch: {
    value: function(newValue) {
      this.currentValue = newValue
      this.setWidthAndPos()
    }
  }
}
</script>

<style lang="scss">
@import "../../assets/sass/_vars";
@import "../../assets/sass/_mixins";

.fdx-nav-tab {
  position: relative;
  z-index: $zIndex-nav-tab;
  height: 40px;
  line-height: 40px;
  background: $bg-gray;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
}

.fdx-nav-tab-item {
  height: 100%;
  color: $text-gray;
  display: flex;
  justify-content: center;
  transition: all ease 200ms;
  &.active {
    color: $gray;
  }
  .item-text {
    height: 100%;
  }

  &:first-of-type {
    justify-content: flex-start;
  }

  &.last-item {
    justify-content: flex-end;
  }
}
.fdx-nav-tab--gradient {
  background-image: linear-gradient(to right, #fa515e 0%, #ea335b 100%);
  .tab-item {
    color: rgba(255, 255, 255, 0.5);
    &.active {
      color: #fff;
    }
  }
  &.fdx-nav-tab--scroll {
    .scroll-line {
      border-color: #fff;
    }
  }
  &.fdx-nav-tab--line,
  &.fdx-nav-tab--longline {
    .tab-item {
      &.active {
        .item-text {
          border-color: #fff;
        }
      }
    }
  }
  box-shadow: none !important;
}
.fdx-nav-tab--primary {
  background: #fff;

  .tab-item {
    color: $gray;
    &.active {
      color: black;
      font-weight: bold;
      font-size: 16px;
    }
  }
  &.fdx-nav-tab--scroll {
    .scroll-line {
      border-color: #F8DE91;
      border-width: 5px;
      z-index: -1;
    }
  }
  &.fdx-nav-tab--line,
  &.fdx-nav-tab--longline {
    .tab-item {
      &.active {
        .item-text {
          border-color: $red;
        }
      }
    }
  }
}

.fdx-nav-tab--shadow {
  // box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.1);
}

.fdx-nav-tab--border {
  border-bottom: 1px solid $border-color;
}

.fdx-nav-tab--line {
  .tab-item {
    .item-text {
      display: inline-block;
    }
    &.active {
      .item-text {
        border-bottom: 2px solid $gray;
      }
    }
  }
}
.fdx-nav-tab--longline {
  .tab-item {
    .item-text {
      display: block;
    }
    &.active {
      .item-text {
        border-bottom: 2px solid $gray;
      }
    }
  }
}
.fdx-nav-tab--scroll {
  .tab-item {
    .item-text {
      display: inline-block;
    }
  }
  .scroll-line {
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 2px solid $gray;
    transition: all ease 200ms;
  }
}
</style>
